<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-背景图-平铺</title>
    <style>
        .box{
            width: 1100px;
            height: 500px;
            border: 3px dashed red;
            /* 居中 */
            margin: 30px auto;
            /* 设置背景图 */
            background-image: url(images/200.png);
            /* 设置背景不平铺 */
            background-repeat: no-repeat;
            /* 设置背景图的位置 */
            /* ---------方位名词---------- */
            background-position: left center;
            background-position: right center;
            /* 右下角 */
            background-position: right bottom;
            /* 左上角 */
            background-position: right top;
            /* ------------坐标---------- */
            background-position: 0 0;
            background-position: 310px 218px;
            background-position: 638px 116px;

            /* 背景图片设置连写方式 */
            background: url(images/200.png) no-repeat left center;
            background: rgba(0,0,0,.3) url(images/200.png) no-repeat 638px 116px;
        }
    </style>
</head>
<body>
    <!-- 
        背景图：
            background-image/background:url('图片地址')
            默认水平和垂直平铺的
        位置：
            background-position: 水平方向  垂直方向
                如果不设置背景位置，默认在左上角,也就是方位left top或者坐标(0,0)
                取值：
                    1)方位名称
                    {
                        left
                        top
                        center
                        bottom
                        right
                    }
                    2) 坐标(推荐)
                        数字+px
     -->
    <div class="box"></div>
</body>
</html>